var ffocus = 1;
var popEXIT = 0;
var yEXIT=0;

var stageState=[[1, 1, 0, 0, 0],[0, 0, 0, 0, 0],[0, 0, 0, 0, 0],[0, 0, 0, 0, 0]];

var selectLevel = 0;
var selectMap = 0;

var mapImageFolder = '';

var pre;

$(document).ready(

		 
	    function() {

	    	//pre = $("#map").val();
	    	//stageState = eval("("+pre+")");
	    	
	    	//console.log("map모양: "+stageState);
		//jquery();
		// To enable the key event processing
		//document.getElementById("anchor").focus();

	    	
		//readFile(0);
		document.getElementById('first').src="../resource/stage/f_1.png";
		document.getElementById('course').src="../resource/stage/5x5x.png";
		//printStage();
		origin();
		//givemeRank(); //랭킹 갖고와서 홈에 뿌려준다
});


function gamego(){
	
	
	console.log("game이 시작됩니다.");
	// selectMap 	
	// selectLevel
	
	location.href="../jsp/5x5.html"; //?selectMap="+selectMap; // +"&code="+curCode+"&slidenum="+slidenum;
	  
	
}


function bt_origin(){
	
	document.getElementById('first').src="../resource/stage/1.png";
	document.getElementById('second').src="../resource/stage/2.png";
	document.getElementById('third').src="../resource/stage/3.png";
	document.getElementById('fourth').src="../resource/stage/4.png";
	
}


function first(){
	
	bt_origin();
	document.getElementById('first').src="../resource/stage/f_1.png";
	selectLevel = 0;
	console.log("현재레벨"+selectLevel);
	origin();
	
}

function second(){
	
	bt_origin();
	document.getElementById('second').src="../resource/stage/f_2.png";
	//printStage();
	selectLevel = 1;
	console.log("현재레벨"+selectLevel);
	
}

function third(){
	
	bt_origin();
	document.getElementById('third').src="../resource/stage/f_3.png";
	//printStage();
	selectLevel = 2;
	console.log("현재레벨"+selectLevel);
	
}

function fourth(){
	
	bt_origin();
	document.getElementById('fourth').src="../resource/stage/f_4.png";
	//printStage();
	selectLevel = 3;
	console.log("현재레벨"+selectLevel);
	
}

function origin(){
	
	document.getElementById('map1').src="../resource/5x5/5x5stage0.png";
	document.getElementById('map2').src="../resource/5x5/5x5stage1.png";
	//document.getElementById('map2').src="../resource/stage/mulmap.png";
	document.getElementById('map3').src="../resource/stage/mulmap.png";
	document.getElementById('map4').src="../resource/stage/mulmap.png";
	document.getElementById('map5').src="../resource/stage/mulmap.png";
	
	$("#map1").animate({width:'100', height:'100', left:'325', top:'225'},'fast');
	$("#map2").animate({width:'100', height:'100', left:'445', top:'225'},'fast');
	$("#map3").animate({width:'100', height:'100', left:'565', top:'225'},'fast');
	$("#map4").animate({width:'100', height:'100', left:'685', top:'225'},'fast');
	$("#map5").animate({width:'100', height:'100', left:'805', top:'225'},'fast');
	
	
}

function map1(){
	
	
	
	selectMap=1;
	origin();

	switch(selectLevel){
	
	
	case 0:
		
		if(stageState[0][0]==0){
			document.getElementById('map1').src="../resource/stage/f_mulmap.png";
			$('#map1').animate({width:'140px', height:'140px', left:'305', top:'205'},'fast');
		}else{
			document.getElementById('map1').src="../resource/5x5/5x5stage0.png";
			$('#map1').animate({width:'140px', height:'140px', left:'305', top:'205'},'fast');
		}
		
	break;
	
	case 1:
		
		if(stageState[1][0]==0){
			document.getElementById('map1').src="../resource/stage/f_mulmap.png";
			$('#map1').animate({width:'140px', height:'140px', left:'305', top:'205'},'fast');
		}else{
			document.getElementById('map1').src="../resource/10x10/10x10stage0.png";
			$('#map1').animate({width:'140px', height:'140px', left:'305', top:'205'},'fast');
		}
		
	break;
	
	case 2:
		
		if(stageState[2][0]==0){
			document.getElementById('map1').src="../resource/stage/f_mulmap.png";
			$('#map1').animate({width:'140px', height:'140px', left:'305', top:'205'},'fast');
		}else{
			document.getElementById('map1').src="../resource/15x15/15x15stage0.png";
			$('#map1').animate({width:'140px', height:'140px', left:'305', top:'205'},'fast');
		}
		
	break;
	
	case 3:
		
		if(stageState[3][0]==0){
			document.getElementById('map1').src="../resource/stage/f_mulmap.png";
			$('#map1').animate({width:'140px', height:'140px', left:'305', top:'205'},'fast');
		}else{
			document.getElementById('map1').src="../resource/20x20/20x20stage0.png";
			$('#map1').animate({width:'140px', height:'140px', left:'305', top:'205'},'fast');
		}
		
	break;
	
	
	}
	
	
	
	
}

function map2(){
	
	selectMap=2;
	origin();
	
	switch(selectLevel){
	
	
	case 0:
		
		if(stageState[0][1]==0){
			document.getElementById('map2').src="../resource/stage/f_mulmap.png";
			$('#map2').animate({width:'140px', height:'140px', left:'425', top:'205'},'fast');
		}else{
			document.getElementById('map2').src="../resource/5x5/5x5stage1.png";
			$('#map2').animate({width:'140px', height:'140px', left:'425', top:'205'},'fast');
		}
		
	break;
	
	case 1:
		
		if(stageState[1][1]==0){
			document.getElementById('map2').src="../resource/stage/f_mulmap.png";
			$('#map2').animate({width:'140px', height:'140px', left:'425', top:'205'},'fast');
		}else{
			document.getElementById('map2').src="../resource/10x10/10x10stage1.png";
			$('#map2').animate({width:'140px', height:'140px', left:'425', top:'205'},'fast');
		}
		
	break;
	
	case 2:
		
		if(stageState[2][1]==0){
			document.getElementById('map2').src="../resource/stage/f_mulmap.png";
			$('#map2').animate({width:'140px', height:'140px', left:'425', top:'205'},'fast');
		}else{
			document.getElementById('map2').src="../resource/15x15/15x15stage1.png";
			$('#map2').animate({width:'140px', height:'140px', left:'425', top:'205'},'fast');
		}
		
	break;
	
	case 3:
		
		if(stageState[3][1]==0){
			document.getElementById('map2').src="../resource/stage/f_mulmap.png";
			$('#map2').animate({width:'140px', height:'140px', left:'425', top:'205'},'fast');
		}else{
			document.getElementById('map2').src="../resource/20x20/20x20stage1.png";
			$('#map2').animate({width:'140px', height:'140px', left:'425', top:'205'},'fast');
		}
		
	break;
	
	
	
	
	}
	
}

function map3(){
	
	origin();
	selectMap=3;
	switch(selectLevel){
	
	
	case 0:
		
		if(stageState[0][2]==0){
			document.getElementById('map3').src="../resource/stage/f_mulmap.png";
			$('#map3').animate({width:'140px', height:'140px', left:'545', top:'205'},'fast');
		}else{
			document.getElementById('map3').src="../resource/5x5/5x5stage2.png";
			$('#map3').animate({width:'140px', height:'140px', left:'545', top:'205'},'fast');
		}
		
	break;
	
	
case 1:
		
		if(stageState[1][2]==0){
			document.getElementById('map3').src="../resource/stage/f_mulmap.png";
			$('#map3').animate({width:'140px', height:'140px', left:'545', top:'205'},'fast');
		}else{
			document.getElementById('map3').src="../resource/10x10/10x10stage2.png";
			$('#map3').animate({width:'140px', height:'140px', left:'545', top:'205'},'fast');
		}
		
	break;
	
	case 2:
		
		if(stageState[2][2]==0){
			document.getElementById('map3').src="../resource/stage/f_mulmap.png";
			$('#map3').animate({width:'140px', height:'140px', left:'545', top:'205'},'fast');
		}else{
			document.getElementById('map3').src="../resource/15x15/15x15stage2.png";
			$('#map3').animate({width:'140px', height:'140px', left:'545', top:'205'},'fast');
		}
		
	break;
	
	case 3:
		
		if(stageState[3][2]==0){
			document.getElementById('map3').src="../resource/stage/f_mulmap.png";
			$('#map3').animate({width:'140px', height:'140px', left:'545', top:'205'},'fast');
		}else{
			document.getElementById('map3').src="../resource/20x20/20x20stage2.png";
			$('#map3').animate({width:'140px', height:'140px', left:'545', top:'205'},'fast');
		}
		
	break;
	
	
	
	
	}
	
}

function map4(){
	
	origin();
	selectMap=4;
switch(selectLevel){
	
	
	case 0:
		
		if(stageState[0][3]==0){
			document.getElementById('map4').src="../resource/stage/f_mulmap.png";
			$('#map4').animate({width:'140px', height:'140px', left:'665', top:'205'},'fast');
		}else{
			document.getElementById('map4').src="../resource/5x5/5x5stage3.png";
			$('#map4').animate({width:'140px', height:'140px', left:'665', top:'205'},'fast');
		}
		
	break;
	

	case 1:
			
			if(stageState[1][3]==0){
				document.getElementById('map4').src="../resource/stage/f_mulmap.png";
				$('#map4').animate({width:'140px', height:'140px', left:'665', top:'205'},'fast');
			}else{
				document.getElementById('map4').src="../resource/10x10/10x10stage3.png";
				$('#map4').animate({width:'140px', height:'140px', left:'665', top:'205'},'fast');
			}
			
		break;
		
		case 2:
			
			if(stageState[2][3]==0){
				document.getElementById('map4').src="../resource/stage/f_mulmap.png";
				$('#map4').animate({width:'140px', height:'140px', left:'665', top:'205'},'fast');
			}else{
				document.getElementById('map4').src="../resource/15x15/15x15stage3.png";
				$('#map4').animate({width:'140px', height:'140px', left:'665', top:'205'},'fast');
			}
			
		break;
		
		case 3:
			
			if(stageState[3][3]==0){
				document.getElementById('map4').src="../resource/stage/f_mulmap.png";
				$('#map4').animate({width:'140px', height:'140px', left:'665', top:'205'},'fast');
			}else{
				document.getElementById('map4').src="../resource/20x20/20x20stage3.png";
				$('#map4').animate({width:'140px', height:'140px', left:'665', top:'205'},'fast');
			}
			
		break;
		
	
	
	}
	
}

function map5(){
	
	origin();
	selectMap=5;
switch(selectLevel){
	
	
	case 0:
		
		if(stageState[0][4]==0){
			document.getElementById('map5').src="../resource/stage/f_mulmap.png";
			$('#map5').animate({width:'140px', height:'140px', left:'795', top:'205'},'fast');
		}else{
			document.getElementById('map5').src="../resource/5x5/5x5stage4.png";
			$('#map5').animate({width:'140px', height:'140px', left:'795', top:'205'},'fast');
		}
		
	break;
	

	case 1:
			
			if(stageState[1][4]==0){
				document.getElementById('map5').src="../resource/stage/f_mulmap.png";
				$('#map5').animate({width:'140px', height:'140px', left:'795', top:'205'},'fast');
			}else{
				document.getElementById('map5').src="../resource/10x10/10x10stage4.png";
				$('#map5').animate({width:'140px', height:'140px', left:'795', top:'205'},'fast');
			}
			
		break;
		
		case 2:
			
			if(stageState[2][4]==0){
				document.getElementById('map5').src="../resource/stage/f_mulmap.png";
				$('#map5').animate({width:'140px', height:'140px', left:'795', top:'205'},'fast');
			}else{
				document.getElementById('map5').src="../resource/15x15/15x15stage4.png";
				$('#map5').animate({width:'140px', height:'140px', left:'795', top:'205'},'fast');
			}
			
		break;
		
		case 3:
			
			if(stageState[3][4]==0){
				document.getElementById('map5').src="../resource/stage/f_mulmap.png";
				$('#map5').animate({width:'140px', height:'140px', left:'795', top:'205'},'fast');
			}else{
				document.getElementById('map5').src="../resource/20x20/20x20stage4.png";
				$('#map5').animate({width:'140px', height:'140px', left:'795', top:'205'},'fast');
			}
			
		break;
	
	
	}
	
	
}




function printStage() {
	if(selectLevel == 0) {
		if(stageState[0][0] == 0)
			document.getElementById('map1').src="../resource/stage/mulmap.png";
		else
			document.getElementById('map1').src="../resource/5x5/5x5stage0.png";
		if(stageState[0][1] == 0)
			document.getElementById('map2').src="../resource/stage/mulmap.png";
		else
			document.getElementById('map2').src="../resource/5x5/5x5stage1.png";	
		if(stageState[0][2] == 0)
			document.getElementById('map3').src="../resource/stage/mulmap.png";
		else
			document.getElementById('map3').src="../resource/5x5/5x5stage2.png";	
		if(stageState[0][3] == 0)
			document.getElementById('map4').src="../resource/stage/mulmap.png";
		else
			document.getElementById('map4').src="../resource/5x5/5x5stage3.png";	
		if(stageState[0][4] == 0)
			document.getElementById('map5').src="../resource/stage/mulmap.png";
		else
			document.getElementById('map5').src="../resource/5x5/5x5stage4.png";	
	}
	else if(selectLevel == 1) {
		if(stageState[1][0] == 0)
			document.getElementById('map1').src="../resource/stage/mulmap.png";
		else
			document.getElementById('map1').src="../resource/10x10/10x10stage0.png";
		if(stageState[1][1] == 0)
			document.getElementById('map2').src="../resource/stage/mulmap.png";
		else
			document.getElementById('map2').src="../resource/10x10/10x10stage1.png";	
		if(stageState[1][2] == 0)
			document.getElementById('map3').src="../resource/stage/mulmap.png";
		else
			document.getElementById('map3').src="../resource/10x10/10x10stage2.png";	
		if(stageState[1][3] == 0)
			document.getElementById('map4').src="../resource/stage/mulmap.png";
		else
			document.getElementById('map4').src="../resource/10x10/10x10stage3.png";	
		if(stageState[1][4] == 0)
			document.getElementById('map5').src="../resource/stage/mulmap.png";
		else
			document.getElementById('map5').src="../resource/10x10/10x10stage4.png";	
	}
	else if(selectLevel == 2) {
		if(stageState[2][0] == 0)
			document.getElementById('map1').src="../resource/stage/mulmap.png";
		else
			document.getElementById('map1').src="../resource/15x15/15x15stage0.png";
		if(stageState[2][1] == 0)
			document.getElementById('map2').src="../resource/stage/mulmap.png";
		else
			document.getElementById('map2').src="../resource/15x15/15x15stage1.png";	
		if(stageState[2][2] == 0)
			document.getElementById('map3').src="../resource/stage/mulmap.png";
		else
			document.getElementById('map3').src="../resource/15x15/15x15stage2.png";	
		if(stageState[2][3] == 0)
			document.getElementById('map4').src="../resource/stage/mulmap.png";
		else
			document.getElementById('map4').src="../resource/15x15/15x15stage3.png";	
		if(stageState[2][4] == 0)
			document.getElementById('map5').src="../resource/stage/mulmap.png";
		else
			document.getElementById('map5').src="../resource/15x15/15x15stage4.png";	
	}
	else if(selectLevel == 3) {
		if(stageState[3][0] == 0)
			document.getElementById('map1').src="../resource/stage/mulmap.png";
		else
			document.getElementById('map1').src="../resource/20x20/20x20stage0.png";
		if(stageState[3][1] == 0)
			document.getElementById('map2').src="../resource/stage/mulmap.png";
		else
			document.getElementById('map2').src="../resource/20x20/20x20stage1.png";	
		if(stageState[3][2] == 0)
			document.getElementById('map3').src="../resource/stage/mulmap.png";
		else
			document.getElementById('map3').src="../resource/20x20/20x20stage2.png";	
		if(stageState[3][3] == 0)
			document.getElementById('map4').src="../resource/stage/mulmap.png";
		else
			document.getElementById('map4').src="../resource/20x20/20x20stage3.png";	
		if(stageState[3][4] == 0)
			document.getElementById('map5').src="../resource/stage/mulmap.png";
		else
			document.getElementById('map5').src="../resource/20x20/20x20stage4.png";	
	}
}

jquery = function()
{	
	
	
	if(selectLevel == 0)
		mapImageFolder = "5x5";
	else if(selectLevel == 1)
		mapImageFolder = "10x10";
	else if(selectLevel == 2)
		mapImageFolder = "15x15";
	else if(selectLevel == 3)
		mapImageFolder = "20x20";
	
	
	$("#map1").focusin(function(){				// map1 포커스
		if(stageState[selectLevel][0] == 0)
			document.getElementById('map1').src="../resource/stage/f_mulmap.png";
		else
			document.getElementById('map1').src="../resource/"+mapImageFolder+"/"+mapImageFolder+"stage0_f.png";
		selectMap = 0;
		$(this).animate({width:'140px', height:'140px', left:'305', top:'205'},'fast');

	});
	$("#map2").focusin(function(){				// map2 포커스
		if(stageState[selectLevel][1] == 0)
			document.getElementById('map2').src="../resource/stage/f_mulmap.png";
		else
			document.getElementById('map2').src="../resource/"+mapImageFolder+"/"+mapImageFolder+"stage1_f.png";
		selectMap = 1;
		$(this).animate({width:'140px', height:'140px', left:'425', top:'205'},'fast');

	});
	$("#map3").focusin(function(){				// map3 포커스
		if(stageState[selectLevel][2] == 0)
			document.getElementById('map3').src="../resource/stage/f_mulmap.png";
		else
			document.getElementById('map3').src="../resource/"+mapImageFolder+"/"+mapImageFolder+"stage2_f.png";
		selectMap = 2;
		$(this).animate({width:'140px', height:'140px', left:'545', top:'205'},'fast');
	});
	
	$("#map4").focusin(function(){				// map4 포커스
		if(stageState[selectLevel][3] == 0)
			document.getElementById('map4').src="../resource/stage/f_mulmap.png";
		else
			document.getElementById('map4').src="../resource/"+mapImageFolder+"/"+mapImageFolder+"stage3_f.png";
		selectMap = 3;
		$(this).animate({width:'140px', height:'140px', left:'665', top:'205'},'fast');
	});
	
	$("#map5").focusin(function(){				// map5 포커스
		if(stageState[selectLevel][4] == 0) {
			document.getElementById('map5').src="../resource/stage/f_mulmap.png";
			alert("요기안오낭?");
		}
		else
			document.getElementById('map5').src="../resource/"+mapImageFolder+"/"+mapImageFolder+"stage4_f.png";
		selectMap = 4;
		$(this).animate({width:'140px', height:'140px', left:'785', top:'205'},'fast');
	});
	
	
	$("#map1").focusout(function(){
	alert("mapImageFolder : " + mapImageFolder);
		if(stageState[selectLevel][0] == 0)
			document.getElementById('map1').src="../resource/stage/mulmap.png";
		else
			document.getElementById('map1').src="../resource/"+mapImageFolder+"/"+mapImageFolder+"stage0.png";
		$(this).animate({width:'100', height:'100', left:'325', top:'225'},'fast');
	});
	
	$("#map2").focusout(function(){
		if(stageState[selectLevel][1] == 0)
			document.getElementById('map2').src="../resource/stage/mulmap.png";
		else
			document.getElementById('map2').src="../resource/"+mapImageFolder+"/"+mapImageFolder+"stage1.png";
		$(this).animate({width:'100', height:'100', left:'445', top:'225'},'fast');	
	});
	$("#map3").focusout(function(){
		if(stageState[selectLevel][2] == 0)
			document.getElementById('map3').src="../resource/stage/mulmap.png";
		else
			document.getElementById('map3').src="../resource/"+mapImageFolder+"/"+mapImageFolder+"stage2.png";
		$(this).animate({width:'100', height:'100', left:'565', top:'225'},'fast');
	});
	
	$("#map4").focusout(function(){
		if(stageState[selectLevel][3] == 0)
			document.getElementById('map4').src="../resource/stage/mulmap.png";
		else
			document.getElementById('map4').src="../resource/"+mapImageFolder+"/"+mapImageFolder+"stage3.png";
		$(this).animate({width:'100', height:'100', left:'685', top:'225'},'fast');
	});
	$("#map5").focusout(function(){
		if(stageState[selectLevel][4] == 0) {
		alert("요기로안오낭?");
			document.getElementById('map5').src="../resource/stage/mulmap.png";
			}
		else
			document.getElementById('map5').src="../resource/"+mapImageFolder+"/"+mapImageFolder+"stage4.png";
		$(this).animate({width:'100', height:'100', left:'805', top:'225'},'fast');
	});

 }
 
 
 

